import React from 'react';
import HolyGrailLayout from '../components/HolyGrailLayout';
import LeftSidebar from '../components/LeftSidebar';
import Navigation from '../components/Navigation';

interface TextProps {}

const Text: React.FC<TextProps> = () => {
  const mainContent = (
    <div className="main-content">
      <article className="hero-section">
        <h1>CSS 文本样式</h1>
        <p className="hero-subtitle">
          文字排版、字体效果和文本动画技巧
        </p>
      </article>

      <section className="text-examples">
        <h2>文本样式示例</h2>
        <div className="examples-grid">
          <div className="example-card">
            <h3>字体样式</h3>
            <div className="demo-box">
              <p className="text-bold">粗体文本</p>
              <p className="text-italic">斜体文本</p>
              <p className="text-underline">下划线文本</p>
              <p className="text-strike">删除线文本</p>
            </div>
          </div>

          <div className="example-card">
            <h3>文本对齐</h3>
            <div className="demo-box">
              <p className="text-left">左对齐文本</p>
              <p className="text-center">居中对齐文本</p>
              <p className="text-right">右对齐文本</p>
              <p className="text-justify">两端对齐文本，这段文字比较长，用来展示两端对齐的效果。</p>
            </div>
          </div>

          <div className="example-card">
            <h3>文字效果</h3>
            <div className="demo-box">
              <p className="text-shadow">阴影文字</p>
              <p className="text-gradient">渐变文字</p>
              <p className="text-outline">描边文字</p>
              <p className="text-glow">发光文字</p>
            </div>
          </div>

          <div className="example-card">
            <h3>文字动画</h3>
            <div className="demo-box">
              <p className="text-typing">打字机效果</p>
              <p className="text-bounce">弹跳文字</p>
              <p className="text-rainbow">彩虹文字</p>
              <p className="text-flip">翻转文字</p>
            </div>
          </div>
        </div>
      </section>

      <section className="text-tips">
        <h2>文本排版技巧</h2>
        <div className="tips-grid">
          <div className="tip-card">
            <h4>📝 字体选择</h4>
            <ul>
              <li>使用系统字体栈提高加载速度</li>
              <li>考虑字体的可读性和美观性</li>
              <li>注意字体版权问题</li>
            </ul>
          </div>
          
          <div className="tip-card">
            <h4>📏 行高设置</h4>
            <ul>
              <li>正文行高建议 1.5-1.8</li>
              <li>标题行高可以适当缩小</li>
              <li>使用相对单位 rem 或 em</li>
            </ul>
          </div>

          <div className="tip-card">
            <h4>🎨 颜色对比</h4>
            <ul>
              <li>确保文字与背景有足够对比度</li>
              <li>遵循 WCAG 无障碍标准</li>
              <li>考虑色盲用户的体验</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  );

  const header = (
    <div className="site-header">
      <div className="header-content">
        <div className="header-top">
          <h1 className="site-title">CSS 文本样式</h1>
          <p className="site-description">文字排版和字体效果技巧</p>
        </div>
        <Navigation />
      </div>
    </div>
  );

  const footer = (
    <div className="site-footer">
      <div className="footer-content">
        <p>&copy; 2025 刘春生个人整理. 专注于前端技术分享</p>
        <div className="footer-links">
          <a href="#">关于我</a>
          <a href="#">联系方式</a>
          <a href="#">RSS订阅</a>
        </div>
      </div>
    </div>
  );

  return (
    <HolyGrailLayout
      header={header}
      leftSidebar={<LeftSidebar />}
      mainContent={mainContent}
      footer={footer}
    />
  );
};

export default Text;
